<template>
  <div class="category">
    <!-- 顶部导航 -->
    <van-nav-bar title="标题" class="top_nav">
      <span slot="left" @click="$router.go(-1)"><i slot="icon" class="iconfont icon-zhiyuanfanhui17"></i></span>
      <van-field v-model="inputVal" slot="title" />
      <span slot="right" @click="jumpToSearch"><i slot="icon" class="iconfont icon-sousuo"></i></span>
    </van-nav-bar>
    <!-- 内容页 -->
    <div class="cate_content">
      <!-- 第一层数据 -->
      <van-badge-group :active-key="activeKey" @change="onChange">
        <van-badge v-for="item in TopCategoryList" :key="item.id" :title="item.categoryName"/>
      </van-badge-group>
      <!-- 第二层数据 -->
      <ul class="cate_brand">
        <li v-for="item in SecondCategoryList" :key="item.id">
          <img :src="'http://127.0.0.1:3000'+item.brandLogo">
          <div class="text">{{item.brandName}}</div>
        </li>
      </ul>
    </div>
    <!-- 底部标签页 -->
    <van-tabbar v-model="active" active-color="#ff8c00">
      <van-tabbar-item icon="home-o" @click="jumpToHome">首页</van-tabbar-item>
      <van-tabbar-item><i slot="icon" class="iconfont icon-caidan1"></i>分类</van-tabbar-item>
      <van-tabbar-item><i slot="icon" class="iconfont icon-ai-cart"></i>购物车</van-tabbar-item>
      <van-tabbar-item><i slot="icon" class="iconfont icon-huiyuan21" @click="jumpToInfo"></i>会员中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { queryTopCategory, querySecondCategory } from '@/api'
export default {
  data () {
    return {
      inputVal: '', // 输入框的值
      activeKey: 0,
      TopCategoryList: [], // 第一层的数据
      TopId: 1,
      SecondCategoryList: [], // 第二层的数据
      active: 1
    }
  },
  created () {
    this.initTopCategory()
    this.GETSecondCategory(this.TopId)
  },
  methods: {
    // 初始化第一层分类
    initTopCategory () {
      queryTopCategory()
        .then(res => {
          // console.log(res)
          this.TopCategoryList = res.data.rows
        })
    },
    // 获取第二层分类的方法
    GETSecondCategory (id) {
      querySecondCategory(id)
        .then(res => {
          // console.log(res)
          this.SecondCategoryList = res.data.rows
        })
    },
    jumpToHome () {
      this.$router.push({ name: 'home' })
    },
    jumpToSearch () {
      this.$router.push({ name: 'search' })
    },
    jumpToInfo () {
      this.$router.push({ name: 'userinfo' })
    },
    onChange (key) {
      // console.log(key)
      this.activeKey = key
      // console.log(key)
      this.TopId = key + 1
      this.GETSecondCategory(this.TopId)
    }
  }
}
</script>

<style lang="scss" scoped>
  .category{
    //顶部导航
    .top_nav{
      background-color: #006699;
      .icon-zhiyuanfanhui17{
        font-size: 18px;
        color: #fff
      }
      .van-nav-bar__title{
        max-width: 76%;
        padding-top: 7px;
        .van-cell{
          padding: 4px 15px;
          line-height: 22px;
        }
      }
      .icon-sousuo{
        font-size: 18px;
        font-weight:700;
        color: #fff
      }
    }
    // 内容页
    .cate_content{
      display: flex;
      .van-badge{
        flex: 1
      }
      .cate_brand{
        flex: 2;
        li{
          float: left;
          width: 20%;
          margin: 20px;
          img{
            width: 100%;
          }
          .text{
            text-align: center;
          }
        }
      }
    }
    // 底部标签页
    .van-hairline--top-bottom{
      background-color: #006699;
      .van-tabbar-item{
        color:#fff
      }
    }
  }
</style>
